<template>
	<div class="kanban-main-warp animated" style="display: block;text-align: left;">
		<div class="kanban-main-container content">
			<div class="kanbanCard-main-container">
				<div class="cardList-container-warp" style="width:100%;">
					<template>
						<!--今日内容-->
						<ul class="cardList-container ui-sortable">
							<li class="kanban-card-container list-today animated" data-card-id="today">
								<div class="kanban-card-container">
									<div class="kanban-card-warp">
										<div class="card-table">
											<div class="head-tr">
												<div class="header not-active" style="display: block;" >
													<div class="attr" style="padding:0px;text-align: center;"><span>{{routeParams.title}}</span> </div>

												</div>
												<div class="card-rename" style="display:none;">
													<input type="text" v-model="addCardItemTitle" placeholder="标题">
													<span class="btn btn-primary save pull-right" v-loading="addCardItemLoading" @click="addTaskWithDueKV(routeParams.key,routeParams.val)">保存</span>
													<div style="clear: both"></div>
												</div>


                        <i class="icon-add_circle addItem" style="display: inline;top: 12px;"></i>
                        <i class="el-icon-arrow-left " @click="$router.go(-1)" style="display: inline;top: 20px;	font-size: 20px;
                        position: absolute;cursor: pointer;left: 4px;color: #bbd1dc;
                        -webkit-transition: all .3s;transition: all .3s;z-index: 5"></i>
											</div>
											<div class="body-tr">
												<div class="body-tr-container">
													<div class="kanban-item-warp">
														<ul class="kanban-item-list">
															<div class="itemTop"></div>
															<div class="kanbanItem-add" style="display: none;"><textarea placeholder="任务标题"></textarea><input type="checkbox" name="">
																<ul style="height:6px"></ul><span class="btn btn-primary save">创建</span><span class="btn btn-secondary cancel">取消</span>
																<div style="clear: both"></div>
															</div>

															<ul class="list-ul doing ui-sortable allow-detail-click" style="min-height: 100px;width: 100%">
																<draggable class="dragArea today-task-list" :list="taskList" :tagKey="routeParams.key" :tagVal="routeParams.val" :options="{group:'task'}" @add="dragAdd" @remove="dragRemove" >
																	<li class="kanban-Item-container animated tooltipstered"
																		:class="[selectedTaskId==item.id?'active':'',item['tags']&&item['tags']['need']?'has-need':'',taskStatusClass(item.state)]"
																		v-for="(item,index) in taskList"
																		:taskId="item.id"
																		draggable="false"
																		:id="item.id"
																		:key="item.id"
																		tabindex="1"
																		@dblclick="showDetail(item.id)"
																		@click="changeSelectedTask(item)"
																		@keyup.ctrl.up="up(index,taskList)"
                                    									@keyup.ctrl.down="down(index,taskList)">
																		<div class="left">
																			<el-checkbox  @change="changeTaskStatusBox(item)" v-model="item.finished"></el-checkbox></div>
																		<div class="right">
																			<div class="portrait-container">
																				<img class="portrait" :src="item.mhead" v-if="item.mhead" draggable="false">
																				<!--<div class="time">07-11</div>-->
																			</div>
																			<div class="row1"><span v-bind:title="item.title+'\n'+item.desc" class="kanban-item-title">{{(index+1)+'.'+item.title}}</span>
																				<div class="receive-btn" style="display: none;">领取</div>
																			</div>
																			<div class="dateNode node"></div>
																		</div>
																	</li>
																</draggable>
															</ul>

															<ul class="list-ul done" style="min-height: 40%;width: 100%"></ul>
														</ul>
													</div>
													<div class="no-task-container" v-show="taskAcount.all==0">
														<img src="../../../static/z39pc/assets/images/no-task.png" alt="" />
														<p>点击创建新任务</p>
														<p>或使用+号创建新任务</p>
													</div>
												</div>
											</div>
										</div>
										<div class="footer">
											<div class="three-type-contaienr" >
												<span @click="changeMode(1)" :class="showMode==1?'active':''">1</span>
												<span @click="changeMode(2)" :class="showMode==2?'active':''">2</span>
											</div>

											<div class="bottom" style="display:block">
												任务 {{taskAcount.finish}} / {{taskAcount.all}} 评估:{{taskAcount.needTotal}} 耗时:{{taskAcount.usedTotal}}
											</div>
										</div>
									</div>
								</div>
							</li>
							<!--时间选项-->
							<li class="kanban-card-container edit-need animated time-list"  style="width: 150px;" v-if="showMode==1">
								<div class="kanban-card-container" style="width: 150px;">
									<div class="kanban-card-warp">
										<div class="card-table">
											<div class="head-tr triangle-badge-lt" :data-quickNo="quickNoStr[0]">
												<div class="header" style="display: block;">
													<div class="attr"><span>日期</span></div>
												</div>
												<!--<div class="card-rename" style="display: none;"><input type="text" placeholder="卡片名称"><span class="btn btn-primary save pull-right">保存</span>
													<div style="clear: both"></div>
												</div>
												<i class="icon-add_circle addItem" style="display: inline;top: 12px;"></i>-->
											</div>
											<div class="body-tr">
												<div class="body-tr-container">
													<div class="kanban-item-warp">
														<ul class="kanban-item-list">
															<div class="itemTop"></div>
															<div class="kanbanItem-add" style="display: none;"><textarea placeholder="任务标题"></textarea><input type="checkbox" name="">
																<ul style="height:6px"></ul><span class="btn btn-primary save">创建</span><span class="btn btn-secondary cancel">取消</span>
																<div style="clear: both"></div>
															</div>
															<ul class="list-ul doing ui-sortable" style="min-height: 38px;width: 100%">
																<li style="width:auto" class="kanban-Item-container need-1 animated tooltipstered" :data-quickNo="index1" v-for="(item1,index1) in timeList" >
																	<div class="left">
																		<!--<div class="checkboxContainer"><span class="diyCheckbox" style="cursor: pointer;"><i class="icon-check_box_outline_blank blank"></i><i class="icon-check check"></i><div class="checkTail"></div></span></div>-->
																		<el-checkbox @change="changeTaskTag('due',item1.value,item1.checked)" v-model="item1.checked"></el-checkbox>
																	</div>
																	<div class="right" style="width:auto">
																		<div class="row1" style="width:auto"><span class="kanban-item-title">{{item1.valueStr}}</span></div>
																	</div>
																	<div style="clear: both"></div>
																</li>
															</ul>
														</ul>
													</div>
												</div>
											</div>
										</div>
										<!--<div class="kanban-item-warp"><ul class="kanban-item-list"><li class="top"></li><li class="itemTop"></li><li class="bottom"><ul class="bottomAdd"><li><i class="icon-add"></i></li><li><span></span></li></ul></li></ul></div>-->
										<div class="footer">
											<div class="bottom">
												<ul class="bottomAdd" style="display: block;">
													<li></li>
													<li><span>-</span></li>
												</ul>
											</div>
										</div>
									</div>
								</div>
							</li>
							<!--时间选项end-->
							<draggable id="tagTmpList" class="dragArea" :options="{animation: 300,}" @end="tagColumnDragEnd()" style="display: inline-block;height: 100%;">
								<li class="kanban-card-container edit-need animated" v-if="showMode==1 && item1.pid == null" v-for="(item1,index1) in tagTmpList" :tagKey="item1.key" :data-card-id="item1.id" style="width: 130px;">
									<div class="kanban-card-container" style="width: 130px;">
										<div class="kanban-card-warp">
											<div class="card-table">
												<div class="head-tr triangle-badge-lt" :data-quickNo="quickNoStr[index1]">
													<div class="header" style="display: block;">
														<div class="attr"><span>{{item1.name}}</span></div>
													</div>
													<div class="card-rename" style="display: none;"><input type="text" v-model="addCardItemTitle" placeholder="标题" style="width: calc(100% - 34px);"><span class="btn btn-primary save pull-right" style="padding: 6px 2px;" @click="addTagTmp(item1)" v-loading="addCardItemLoading">保存</span>
														<div style="clear: both"></div>
													</div>
													<i class="icon-add_circle addItem" :class="item1.key=='other'||item1.key=='dev'?'is-show-dialog':''" @click="showTmpDialog(item1)" style="display: inline;top: 12px;" v-show="cantEditTags.indexOf(item1.key)<0"></i>
												</div>
												<div class="body-tr">
													<div class="body-tr-container">
														<div class="kanban-item-warp">
															<ul class="kanban-item-list">
																<div class="itemTop"></div>
																<div class="kanbanItem-add" style="display: none;"><textarea placeholder="任务标题"></textarea><input type="checkbox" name="">
																	<ul style="height:6px"></ul><span class="btn btn-primary save">创建</span><span class="btn btn-secondary cancel">取消</span>
																	<div style="clear: both"></div>
																</div>
																<ul class="list-ul doing ui-sortable" style="min-height: 38px;width: 100%">
																	<draggable class="dragArea today-task-list" :options="{group:'task'+index1,animation: 300}">
																		<li style="width:auto" class="kanban-Item-container need-1 animated tooltipstered " :tagKey="item2.key" :value="item2.value" :data-quickNo="index2" v-for="(item2,index2) in item1.list" v-bind:proId="item2.key">
																			<div class="left">
																				<el-checkbox @change="changeTaskTag(item2.key,item2.value,item2.checked,item1.key)" v-model="item2.checked"></el-checkbox>
																			</div>
																			<div class="right">
																				<div class="row1" style="width:auto">
																					<span class="kanban-item-title">{{ item2.key == "to" ? item2.name:(item2.key == "repeat"?item2.name:(item2.value || item2.name))}}</span>
																					<span class="el-icon-circle-close" @click="updateTagTmp(item1,item2.key,item2.value)" v-show="cantEditTags.indexOf(item1.key)<0"></span>
																				</div>
																			</div>
																			<div style="clear: both"></div>
																		</li>
																	</draggable>
																</ul>
															</ul>
														</div>
													</div>
												</div>
											</div>
											<!--<div class="kanban-item-warp"><ul class="kanban-item-list"><li class="top"></li><li class="itemTop"></li><li class="bottom"><ul class="bottomAdd"><li><i class="icon-add"></i></li><li><span></span></li></ul></li></ul></div>-->
											<div class="footer">
												<div class="bottom">
													<ul class="bottomAdd" style="display: block;">
														<li></li>
														<li><span>-</span></li>
													</ul>
												</div>
											</div>
										</div>
									</div>
								</li>
							</draggable>
						</ul>
						<div class="addCard" style=" height: 100%;width: 80px;" @click="addColumn()" v-if="showMode == 1">
							<ul class="addCard-ul" style="position:relative;top: 50%;margin-top: -35px;">
								<li><i class="icon-add_circle addItem"></i></li>
								<li><span>新建</span></li>
							</ul>
						</div>

						<div id="md-wrap" v-show="showMode == 2">
							<markdown-editor v-model="taskContent" v-show="false" ref="markdownEditor" :configs="mdConfig" :autoinit="false"></markdown-editor>

							<section class="mdcontainer" v-html="outTaskContent"></section>

						</div>

					</template>
				</div>
			</div>
		</div>
		<div class="kanban-main-container" id="taskeditor" style="position:absolute" @keydown.esc="escEditor()" tabindex="1" >
    	</div>
		<div class="task-detail-container" tabindex="1" @keydown.esc="escTaskDetail()" >
			<!--<task-detail ref="showTaskDetail"></task-detail>-->
			<task-detail ref="taskDetailComponent"></task-detail>
		</div>
		<tmp-dialog ref="tmpDialog"></tmp-dialog>
	</div>
</template>

<script>
	import pinyin from '../../../static/z39pc/js/pinyin.js'
	import draggable from 'vuedraggable'
	import _ from "underscore";
	import moment from "moment";
	import tmpDialog from '../../components/task/tmpDialog.vue'
	import taskDetail from '../../components/task/taskDetail.vue'
	import api from '../../api';
	import { taskAndTag } from "../../common/mixin";
	import { mixinPc } from "../../common/mixinPc";
	import markdownEditor from 'vue-simplemde/src/markdown-editor'
	import { bus } from "../../common/bus";

	import {
		mapState,
		mapActions
	} from 'vuex'
	import {mixinEditor} from "../../common/mixinEditor";
	var initPage=function(_this){
		//勾选框
		$('body').on('click','li.kanban-Item-container .diyCheckbox',function(e){
			//console.log(this)
			e.cancelBubble=true;
			e.stopPropagation();
			$(this).toggleClass('checked').parent().parent().parent().siblings().find('.diyCheckbox').removeClass('checked')
		})
	}
	export default {
		components: {
			'task-detail': taskDetail,
			'tmp-dialog':tmpDialog,
			'markdown-editor': markdownEditor,
			draggable
			//'task-detail':require('../../components/taskDetail.vue'),
		},
		data() {
			return {
				mdConfig:{
					toolbar:false,
					status: false
				},
				showMode:1,
				taskContent: '',
				outTaskContent:'',
				// todayTags: [],
				quickNoStr:"QWERTYUIOP",
				routeParams:this.$route.params,
				projectId:this.$route.params.projectId,
				taskList:[],
				timeList:[],
				selectedTaskId:'',
				tagTmpList:[],
				taskAcount:{
					all:0,
					finish:0
				},
				tagsRepeatList: [{
					name: "每天",
					key: "repeat",
					active: false,
					value: 'D'
				}, {
					name: "每周1",
					key: "repeat",
					active: false,
					value: 'W1'
				}, {
					name: "每周2",
					key: "repeat",
					active: false,
					value: 'W2'
				}, {
					name: "每周3",
					key: "repeat",
					active: false,
					value: 'W3'
				}, {
					name: "每周4",
					key: "repeat",
					active: false,
					value: 'W4'
				}, {
					name: "每周5",
					key: "repeat",
					active: false,
					value: 'W5'
				}, {
					name: "每周6",
					key: "repeat",
					active: false,
					value: 'W6'
				}, {
					name: "每周日",
					key: "repeat",
					active: false,
					value: 'W7'
				}, {
					name: "每月",
					key: "repeat",
					active: false,
					value: 'M'
				}, {
					name: "每年",
					key: "repeat",
					active: false,
					value: 'Y'
				}],
				tagsRepeatDic:{},
				cantEditTags:['to','project','repeat','area4','recent'],
				cantDeleteTags: ['dev','need','other','to', 'project', 'repeat', 'area4', 'recent']
			};
		},
		mixins: [taskAndTag,mixinPc,mixinEditor],
		computed: {
			...mapState({
				uid: state => state.vux.uid,
				minDate: state => state.z39.minDate,
				maxDate: state => state.z39.maxDate,
				taskAll: state => state.z39.taskAll,
				tagDic: state => state.z39.tagDic,
				taskDic: state => state.z39.taskDic,
				tagitems: state => state.z39.tagitems,
				tagitemDic: state => state.z39.tagitemDic,
				days: state => state.z39.days,
				projects: state => state.z39.projects,
				members: state => state.z39.members,
				todayTags: state => state.z39.tagtmps,
				memberDic: state => state.z39.memberDic,
				daySelect: state =>state.z39.selectedDayDate,
				filterTaskState: state =>state.z39.filterTaskState,
			}),
			simplemde () {
				return this.$refs.markdownEditor.simplemde;
			},
			getTimeList:function(){
				var firstDay=moment(this.routeParams.val).format('YYYY-MM')+'-01';
				var days=moment(this.routeParams.val).daysInMonth();
				var timeList=[];
				for(var i=0;i<days;i++){
					timeList.push({
						id:i,
						value:moment(firstDay).add(i,'days').format('YYYY-MM-DD'),
						valueStr:moment(firstDay).add(i,'days').format('YYYY-MM-DD'),
						checked:''
					})
				}
				if(this.routeParams.type=='monthTask'){
					var weeks=['周一','周二','周三','周四','周五','周六','周日'];
					var searchDays=[];
					if(moment(this.routeParams.val).day()!=0){//==0为周末
					for(var i=1;i<8;i++){
							searchDays.push(moment(this.routeParams.val).days(i).format("YYYY-MM-DD"))//这周中的第几天
						}
					}else{
						for(var i=-6;i<1;i++){
							searchDays.push(moment(this.routeParams.val).days(i).format("YYYY-MM-DD"))//这周中的第几天
						}
					}
					var arr=[]
					weeks.map(function(item,index){
						arr.push({
							id:index,
							value:searchDays[index],
							valueStr:item,
							checked:''
						})
					})
					timeList=arr.concat(timeList)
				}else if(this.routeParams.type=='yearTask'||this.routeParams.type=='projectTask'){
					var year=moment(this.routeParams.val).format('YYYY');
					if(this.routeParams.type=='projectTask'){
						year=moment(this.daySelect).format('YYYY');
					}
					var months=['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月']
					var arr=[]
					months.map(function(item,index){
						var month=index<9?'0'+(index+1):index;
						arr.push({
							id:index,
							value:year+'-'+month,
							valueStr:item,
							checked:''
						})
					})
					timeList=arr.concat(timeList)
				}
				timeList.forEach(function(item,index){
					item.id=index;
				})
				this.timeList=timeList;
				return timeList;
			},
			getTaskList:function(){
				var _this=this;
				var list=this.routeParams.list;
				var tList=[];
				if(this.routeParams.type=='monthTask'||this.routeParams.type=='weekTask'){
					for (var i=0;i<list.length;i++){
						var taskItem=this.taskDic[list[i].id];
						//如果要选择日期，实时修改任务显示消失的话，就改动这里
						//if(taskItem.tags&&taskItem.tags['due']==this.routeParams.val){
						if(taskItem.tags&&taskItem.tags['due']){
							tList.push(taskItem)
						}
					}
				}else if(this.routeParams.type=='yearTask'){
					for (var i=0;i<list.length;i++){
						var taskItem=this.taskDic[list[i].id];
						if(taskItem.tags&&taskItem.tags['due']&&moment(taskItem.tags['due']).format('YYYY-MM')==this.routeParams.val){
							tList.push(taskItem)
						}
					}
				}else if(this.routeParams.type=='projectTask'){
					for (var i=0;i<list.length;i++){
						var taskItem=this.taskDic[list[i].id];
						var key = this.routeParams.key;
						if(key=="to"){
							if(taskItem.uid == this.routeParams.val ) tList.push(taskItem);
						}else if(taskItem.tags&&taskItem.tags[key]!=undefined){
							tList.push(taskItem)
						}
					}
				}
				this.taskList=tList.filter(task=>{
					if(_this.filterTaskState==''||_this.filterTaskState==0){
						return task
					}else if(_this.filterTaskState==1){
						return task.state!='done'&&task.state!='cancelled'
					}else if(_this.filterTaskState==2){
						return task.state=='done'
					}
				});
		          var needTotal = 0;
		          var usedTotal = 0;
		          this.taskAcount.finish = this.taskList.filter(function (task) {
		            if (task.tags && task.tags.need) needTotal += parseInt(task.tags.need);
		            if (task.tags && (task.tags.used||task.tags.wasted)) usedTotal += getSecond(task.tags.used||task.tags.wasted);
		            return task.state && task.state == 'done'
		          }).length;
		          this.taskAcount.needTotal = formatUsed(needTotal);
		          this.taskAcount.usedTotal = formatUsed(usedTotal);
				this.taskAcount.all=tList.length;
				console.log("getTaskList");
			}
		},
		watch: {
			"taskAll":{
				handler(){
					this.getTaskList;
				},
				deep:true,
			},
			todayTags:{
				handler() {
					this.getTagTmpList();
				},
				deep: true,
			},
			filterTaskState:function(){
				this.getTaskList;
			}
		},
		created() {
			this.tagsRepeatList.forEach(item=>{
				this.tagsRepeatDic[item.value]=item.name;
			})
		},
		filters: {

		},
		methods: {
			daterangeChange(currentDate) {
		  	},
			parseTaskContent:function(){
				let taskContent = '';
				this.taskList.forEach(item => {
					//taskContent += '### '+item.title+' ###\n '+item.desc+'\n';
					taskContent += '<h3 id="mde'+item.id+'">'+item.title+'</h3>\n <p>'+this.simplemde.markdown(item.desc)+'</p><br/>\n';
				});
				//this.taskContent = taskContent;

				this.outTaskContent = taskContent;//this.simplemde.markdown(this.taskContent);

			},
			initMDE:function(){
				if(this.showMode != 2){
					return ;
				}


				this.$refs.markdownEditor.initialize();
				this.parseTaskContent();
			},
			changeMode(type){
				this.showMode = type;
				this.initMDE();

				//this.getList(this.pid,type);
			},
			getTagTmpList:function(){
				var tmpList=[];
				var _this=this;
				tmpList=this.todayTags.map(function(item){
					var obj=Object.assign({},item)
					obj.list=_this.getTagsProList( obj.tmp,obj)
					return obj;
				})
				this.tagTmpList=tmpList;
			},
			getTagsProList: function(item, parentItem) {
				let _this = this;
				var arr1 = item.split(',')
				var list = [];
				arr1.forEach(function(it) {
					if(it == '') {
						return;
					}
					var key = it.split('=')[0];
					var val = it.split('=')[1];
					var obj, people, iserror = false;
					if((key == "to") && val&&parentItem.key=='to') {
						people = _this.memberDic["uid_" + val];
						obj = {
							key: key,
							name: people?people.name:'',
							value:people? people.uid:'',
							checked:false
						};
						//没找到人名时不显示
						if(obj.name){
							list.push(obj)
						}
					}else if(key=='repeat'){
						obj = {
							key: key,
							name: _this.tagsRepeatDic[val] || '',
							value: val,
							checked: false,
						};
						console.log(obj)
						list.push(obj)
					} else if(key != "to"||parentItem.key!='to') {
						obj = {
							key: key,
							name: _this.tagitemDic[key]||'',
							value: val,
							checked:false
						};
						list.push(obj)
					}
				})
				return list;
			},
			//修改选中任务
			changeSelectedTask:function(item){
				event.cancelBubble=true;
				event.stopPropagation();
				this.timeList.forEach(function(item1){
					item1.checked=false;
				})
				this.tagTmpList.forEach(function(item1){
					item1.list.forEach(function(item2){
						item2.checked=false;
					})
				})
				//开发和其他的key需要做判断，成员现在还没做
				for(var key1 in item.tags){
					var isNormalKey=false;
					this.tagTmpList.forEach(function(item1){
						if(item1.key==key1){
							isNormalKey=true;
							item1.list.forEach(function(item2){
								if(item2.value==item.tags[key1]){
									item2.checked=true;
								}
							})
						}
					})
					if(!isNormalKey){
						this.tagTmpList.forEach(function(item1){
							if(item1.key=='other'||item1.key=='dev'){
								item1.list.forEach(function(item2){
									if(item2.key==key1){
										item2.checked=true;
									}
								})
							}
						})
					}
				}
				//显示对应的标签
				this.selectedTaskId=item.id;

				//wd-wrap mdcontainer
				let container = $("#md-wrap section.mdcontainer");
				let mdeNode = $('#mde'+item.id,container);


				mdeNode.length>0 &&container.scrollTop(mdeNode.position().top+container.scrollTop() - 10);

			},
			//选择框选择
			changeTaskTag:function(key,value,checked,parentKey){
				if(!checked){
					if(key=='due'){
						return;
					}else{
						var tag = this.tagDic[this.selectedTaskId + "_" + key];
						this.tagDel(tag, false,this.taskDic[this.selectedTaskId]);
						return;
					}
				}
				if(this.selectedTaskId==''){
					this.$message({
			          message: '请先选中一条任务',
			          type: 'warning'
			       	});
			       	console.log(key)
			        if(key=='due'){
			        	this.timeList.forEach(function(item){
							item.checked=false;
						})
			        }else{
			        	this.tagTmpList.forEach(function(item){
							item.list.forEach(function(item2){
								item2.checked=false;
							})
						})

			        }
			        return;
				}
				if(key=='due'){
					this.timeList.forEach(function(item){
						if(item.value!=value){item.checked=false}
					})
				}else{
					//开发和其他要判断
					this.tagTmpList.forEach(function(item) {
						if(item.key == parentKey) {
							if(parentKey == 'dev' || parentKey == 'area4') {
								item.list.forEach(function(item2) {
									item2.key == key ? (item2.checked = true) : (item2.checked = false);
								})
							} else if(!(parentKey == 'other'||parentKey == 'recent')){
								item.list.forEach(function(item2) {
									item2.value == value ? (item2.checked = true) : (item2.checked = false);
								})
							}
						}
					})
				}
//				var taskItem=this.taskDic[this.selectedTaskId];
//				var tagId=this.tagDic[this.selectedTaskId+'_'+key].id;
//				var params={
//					id:tagId,
//					key:key,
//					value:value
//				}
//				var _this=this;
//				api.tagSet(params).then(data => {
//	                if (data && data.errno == 0) {
//	                    data = data.data;
//	                    if (data > 0) {
//	                    	_this.$notify({
//					          title: '成功',
//					          message: '设置成功',
//					          type: 'success'
//					        });
//
//	                        this.$store.commit({ type: "z39/tagSet", task: taskItem, sdata: params });
//	                        _this.getTaskList;
//	                    }
//
//	                } else { //发生错误.
//	                    _this.$message.error(data.errmsg);
//	                }
//	            })
				var taskItem=this.taskDic[this.selectedTaskId];
				if(key=="need" && value.indexOf(":")!=-1) value = value.split(":")[0]*3600+value.split(":")[1]*60;
				this.doTagSet(taskItem,key,value,false)
			},
			showDetail: function(taskId) {
        //由于会引起闪屏，所以关掉
				//$('.task-detail-container').focus()
				this.$refs.taskDetailComponent.showTaskDetail(taskId)
			},
			dragRemove: function(event) {
//				console.log(this.dragItemData)
			},
			tagColumnDragEnd:function(){
				var tagArr=[];
				$('#tagTmpList>li').each(function(){
					tagArr.push($(this).attr('tagKey'))
				})
				localStorage.setItem('tagTmpSortArr',JSON.stringify(tagArr));
			},
			addColumn: function() {
				this.$prompt('请输入标签名', '添加列', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					inputPattern: /.+/,
					inputErrorMessage: '标签名不能为空'
				}).then(({
					value
				}) => {

					var valueText = pinyin.pinyin.getCamelChars(value)+pinyin.pinyin.getFullChars(value);
					if(value.length>12){
						this.showNotice('标签长度不能不能超过12个字符', 'warning');
						return;
					}
					if(valueText.length>25){
						valueText=valueText.substring(0,25)
					}
					var hasKey=this.tagTmpList.some(item=>{
						return item.key==valueText
					})
					if(hasKey){
						this.showNotice('标签已存在', 'warning');
						return;
					}
//					this.addCardItemLoading = true;
					var params = {
						pid: null,
						count: null,
						type: 1,
						name: value,
						key: valueText,
						tmp: ''
					}
					var _this = this;
					api.tagTmpAdd(params).then(data => {
						if(data && data.errno == 0) {
							_this.addCardItemTitle = ''
							_this.$message({
								message: '保存成功',
								type: 'success'
							})
							params.id = data.data;
							params.type = "z39/addTagTmps";
							_this.$store.commit(params);
							var time1=setTimeout(function(){
								clearTimeout(time1)
								_this.tagColumnDragEnd();
							},1000)

						} else { //发生错误.
							_this.$message({
								message: data.errmsg,
								type: 'error'
							});
						}
					})
				}).catch(() => {

				});
			},
			updateTagTmp:function(tagTmp,delKey,delValue){
				event.stopPropagation();
				event.cancelBubble=true;
				var params = {
			        id: tagTmp.id,
			        pid: null,
			        count: null,
			        type: 1,
			        name: tagTmp.name,
			        key: tagTmp.key,
			    }
				var tagTmpArr=tagTmp.tmp?tagTmp.tmp.split(','):[];
				var index1=tagTmpArr.indexOf(delKey);
				var index2=tagTmpArr.indexOf(tagTmp.key+'='+delValue)
				if(index1>-1){
					tagTmpArr.splice(index1,1)
				}
				if(index2>-1){
					tagTmpArr.splice(index2,1)
				}
				params.tmp=tagTmpArr.join(',')
				if(tagTmp.init == 1) {
					return api.tagTmpAdd(params).then(data => {
						if(data.errno != 0) {
							this.showNotice(data.errmsg, 'warning', true);
							return Promise.reject(data.errmsg);
						}
						this.$store.commit({
							type: "z39/updateTagTmps",
							id: data.data,
							tmp: params.tmp,
							key: tagTmp.key
						});
						return Promise.resolve(data.data);
					})
				} else {
					return api.tagTmpPut(params).then(data => {
						this.addCardItemLoading = false;
						if(data.errno != 0) {
							this.showNotice(data.errmsg, 'warning', true);
							return Promise.reject(data.errmsg);
						}
						this.$store.commit({
							type: "z39/updateTagTmps",
							id: params.id,
							tmp: params.tmp,
							key: tagTmp.key
						});
						return Promise.resolve(data.data);
					})
				}
			},
			delTagTmp: function(tagTmp) {
				this.$confirm('是否确认删除选中标签？', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					console.log(tagTmp)
					api.tagTmpDel({
						id: tagTmp.id
					}).then(data => {
						if(data.errno != 0) {
							this.showNotice(data.errmsg, 'warning', true);
							return Promise.reject(data.errmsg);
						}
						this.showNotice('删除成功', 'success', true);
						this.$store.commit({
							type: "z39/deleteTagTmp",
							id: tagTmp.id,
						});
						return Promise.resolve(data.data);
					})
				}).catch(() => {

				});

			}

		},
		mounted() {
			bus.$on('toShowTaskDetail', id => {
				console.log("sdfsd")
				this.showDetail(id)
			})
			this.getTimeList;
			this.getTaskList;
			initPage()
			this.getTagTmpList();

			this.initMDE();
			//this.resort();
			//base.Sortable(['.kanban-item-list .ui-sortable'])
			//			console.log( this.$route.params.todayTags)
		}
	}
</script>

<style>
@media screen and (max-height: 1280px){
  #taskeditor {
    display: none;
    width: calc(100% - 380px) !important;
    margin-right: 5px;
  }
}
 @media screen and (max-height: 800px){
    #taskeditor{
      display: none;
      height: 100% !important;
      margin-top: -20px;
      width: calc(100% - 310px) !important;
      margin-right: 1px;
    }
  }
	/* #taskeditor {
		display: none;
		width: calc(100% - 300px) !important;
	} */
	li :focus{
		outline: none;
	}
</style>
